<!--
 * @Author: Tim
 * @Date: 2020-08-14 09:43:29
 * @LastEditTime: 2020-08-14 09:51:23
 * @LastEditors: Please set LastEditors
 * @Description: 图片加载器
 * @FilePath: /mzi-cell-oos/src/components/af_image/index.vue
-->
<template>
    <view class="af-img-wrap" :style="getStyle">
        <view class="af-img-default-bg" v-if="flag" />
        <image v-if="src" :style="getStyle" :mode="mode" :src="src" lazy-load="true" @load="onLoadSucc"
            @error="onLoadFail" />
    </view>
</template>

<script>
    export default {
        name: 'AfImage',

        props: {
            mode: {
                type: String,
                default: 'scaleToFill'
            },

            width: {
                type: Number,
                default: 0
            },

            height: {
                type: Number,
                default: 0
            },

            src: String
        },

        data() {
            return {
                flag: true
            }
        },

        computed: {
            /**
             * 获取图片占位器宽高属性
             */
            getStyle() {
                let width = this.width;
                let height = this.height;
                return `width: ${width}rpx;height: ${height}rpx;`
            }
        },

        methods: {
            onLoadSucc: function (e) {
                this.flag = false;
            },

            onLoadFail: function (e) {
                console.warn(e.detail.errMsg);
            }
        }
    }
</script>

<style lang="scss" scoped>
    /* components/wg-img/wg-img.wxss */
    .af-img-wrap {
        position: relative;
        display: block;
    }

    .af-img-default-bg {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        z-index: 1;
        background: #efefef;
    }
</style>